/*-----------------------------------------------------------------------------
  [CSS - Spellbook]

  Feuille de style pour le positionnement des éléments dans le spellbook
  
  1. Global
  2. Custom spell
  
-----------------------------------------------------------------------------*/

/*---------------------------------------------------------------------
[1. Global]
*/
#spellbook #spells .row {
	width: 637px;
}

	#spellbook #spells .spell img {
		border: 2px #FFF solid;
		height: 128px;
		width: 128px;
	}

#spellbook .shortcut {
	height: 132px;
	width: 132px;
}

#spellbook .shortcut:hover {
	opacity: 1;
}

/*---------------------------------------------------------------------
[2. Custom spell]
*/
#spellbook #custom {
	height: 393px;
	margin: auto;
	width: 70%;
}

	#spellbook #custom .left {
		/*background-color: #DFDFDF;*/
		float: left;
		height: 95%;
		margin-top: 45px;
		width: 50%;
	}

		#spellbook #custom .left div {
			margin: auto;
		}

		#spellbook #custom .left #preview {
			background-color: #FFF;
			height: 215px;
			width: 215px;
		}

			#spellbook #custom .left #preview .slide {
				border: 2px #FFF solid;
				height: 215px;
				width: 215px;
			}

		#spellbook #custom .left #name_block {
			margin-top: 25px;
			width: 157px;
		}

			#spellbook #custom .left #name_block #spell_name {
				text-align: center;
			}

		#spellbook #custom .left #button_block {
			margin-top: 50px;
		}

			#spellbook #custom .left #button_block #save {
				margin-right: 40px;
			}

			#spellbook #custom .left #button_block #save,
			#spellbook #custom .left #button_block #save:visited,
			#spellbook #custom .left #button_block #cancel,
			#spellbook #custom .left #button_block #cancel:visited {
				color: #55127e;
				text-decoration: none;
			}

			#spellbook #custom .left #button_block #save:focus,
			#spellbook #custom .left #button_block #save:hover,
			#spellbook #custom .left #button_block #cancel:focus,
			#spellbook #custom .left #button_block #cancel:hover {
				text-decoration: underline;
			}


	#spellbook #custom .right {
		/*background-color: #8F8F8F;*/
		float: left;
		height: 95%;
		margin-top: 45px;
		padding-right: 33px;
		text-align: right;
		width: 40%;
	}

		#spellbook #custom .right .input_block {
			padding-right: 10px;
		}

			#spellbook #custom .right .input_block label {
				margin-right: 20px;
				text-transform: capitalize;
			}

			#spellbook #custom .right .input_block span.input {
				display: inline-block;
			}

			#spellbook #custom .right .input_block .input {
				display: inline-block;
				text-align: center;
				width: 90px;
			}
			
			#spellbook #custom .right .input_block input[type="number"] {
				margin-right: 2px;
				/*width: 149px;*/
			}

			#spellbook #custom .right .input_block select {
				margin-right: 2px;
				/*width: 153px;*/
			}

			#spellbook #custom .right .input_block .button_block {
				display: inline-block;
				position: relative;
				top: 13px;
			}

				#spellbook #custom .right .input_block .button_block img {
					display: block;
					cursor: pointer;
				}

			#spellbook #custom .right #cooldown_block {
				margin-top: 20px;
				margin-right: 38px;
			}		
			#spellbook #custom .right #cooldown_block .input {
				width: 70px;
			}	
			#spellbook #custom .right #cooldown_block .seconds {
				float: right;
				margin-left: 10px;
			}	